<script setup>
import { onMounted, ref } from 'vue';
import easyapi from '../api';
import * as echarts from 'echarts';

const checkObj = ref({});

onMounted(async function() {
  await checkData();
});

const checkData = async function(val) {
  if (typeof val === 'number') {
    checkObj.value.page = val;
  }
  const priceResponse = await easyapi.get("/api/getallprice", checkObj.value);
  const priceData = priceResponse.data;
  const timeResponse = await easyapi.get("/api/getalltime", checkObj.value);
  const timeData = timeResponse.data;

  drawCharts(timeData, priceData);
};
const drawCharts = function(timeData, priceData) {
  const pieChartDom = document.getElementById('pieChartContainer');
  const pieChart = echarts.init(pieChartDom);
  const categories = timeData.map(item => item.time); 
  const values = priceData.map(item => item.price); 
  const pieOption = {
    tooltip: {
      trigger: 'item',
      backgroundColor: '#000910',
      borderWidth: 0,
      borderRadius: 0,
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    series: [
      {
        name: '销售金额',
        type: 'pie',
        radius: '50%',
        data: timeData.map((category, index) => ({
          value: priceData[index],
          name: category
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  pieChart.setOption(pieOption);

  const lineChartDom = document.getElementById('lineChartContainer');
  const lineChart = echarts.init(lineChartDom);

  const lineOption = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#000910',
      borderWidth: 0,
      borderRadius: 0,
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: timeData,
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '销售金额',
        type: 'line',
        data: priceData,
        lineStyle: {
          color: '#43A2E7'
        }
      }
    ]
  };

  lineChart.setOption(lineOption);

  window.addEventListener("resize", () => {
    pieChart.resize();
    lineChart.resize();
  });
};
</script>

<template>
  <div>
    <div id="pieChartContainer" style="width: 100%; height: 300px;"></div>
    <div id="lineChartContainer" style="width: 100%; height: 300px;"></div>
  </div>
</template>

<style></style>
